<template>
  <div class="lunBo">
    <div class="swiper" ref="floor1Swiper">
      <div class="swiper-wrapper ccsw">
        <div class="swiper-slide">
          <ul class="lunbo_ul">
            <li v-for="item in lunbotu" :key="item.id">
              <img :src="item.img" alt="" />
              <p>{{ item.name }}</p>
            </li>
          </ul>
        </div>
        <div class="swiper-slide">
          <ul class="lunbo_ul">
            <li v-for="item1 in lunbotu2" :key="item1.id">
              <img :src="item1.img" alt="" />
              <p>{{ item1.name }}</p>
            </li>
          </ul>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination4 swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->
      <!-- <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div> -->

      <!-- 如果需要滚动条 -->
      <!-- <div class="swiper-scrollbar"></div> -->
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
export default {
  data() {
    return {
      lunbotu: [
        {
          img: "//m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png",
          name: "京东超市1",
          id: 1,
        },
        {
          img: "//m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png",
          name: "京东超市2",
          id: 2,
        },
        {
          img: "//m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png",
          name: "京东超市3",
          id: 3,
        },
        {
          img: "//m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png",
          name: "京东超市4",
          id: 4,
        },
        {
          img: "//m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png",
          name: "京东超市5",
          id: 5,
        },
        {
          img: "//m15.360buyimg.com/mobilecms/jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png",
          name: "京东超市6",
          id: 6,
        },
        {
          img: "//m15.360buyimg.com/mobilecms/jfs/t1/34248/39/16616/4689/62bbbdccE9f11132e/d51caf15f2f412b2.png",
          name: "京东超市7",
          id: 7,
        },
        {
          img: "//m15.360buyimg.com/mobilecms/jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png",
          name: "京东超市8",
          id: 8,
        },
        {
          img: "//m15.360buyimg.com/mobilecms/jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png",
          name: "京东超市9",
          id: 9,
        },
        {
          img: "//m15.360buyimg.com/mobilecms/jfs/t1/191060/24/12861/6818/60ec11f2E67cf5ee6/c264378678b3cd96.png",
          name: "京东超市10",
          id: 10,
        },
      ],
      lunbotu2: [
        {
          img: "//m15.360buyimg.com/mobilecms/jfs/t1/186882/8/12149/5894/60ec1250E9335241a/b22054613aa8ae75.png",
          name: "京东超市1",
          id: 11,
        },
        {
          img: "//m15.360buyimg.com/mobilecms/jfs/t1/145692/9/1817/4493/5efbf652E61c4f3ec/722840c121d67fc6.png",
          name: "京东超市2",
          id: 22,
        },
        {
          img: "//m15.360buyimg.com/mobilecms/jfs/t1/185282/10/13877/6658/60ec1404E0fc4061a/a7c213f76e37a8d6.png",
          name: "京东超市3",
          id: 33,
        },
        {
          img: "//m15.360buyimg.com/mobilecms/jfs/t1/182378/35/13924/7463/60ec14c6E1f434a60/37fba58239f3547e.png",
          name: "京东超市4",
          id: 44,
        },
        {
          img: "//m15.360buyimg.com/mobilecms/jfs/t1/191377/35/12864/5624/60ec146cE304517a9/20acb632f59fbbbd.png",
          name: "京东超市5",
          id: 55,
        },
        {
          img: "//m15.360buyimg.com/mobilecms/jfs/t1/36551/10/16098/5792/60ec1589E755822d7/f958b896e706008a.png",
          name: "京东超市6",
          id: 66,
        },
        {
          img: "//m15.360buyimg.com/mobilecms/jfs/t1/192665/22/12752/7912/60ec15cbE261a32bf/3ace51badf80e71b.png",
          name: "京东超市7",
          id: 77,
        },
      ],
      list: null,
    };
  },
  mounted() {
    axios.get("http://121.89.205.189:3000/api/pro/categorylist").then((res) => {
      this.list = res.data.data;
    });
  },
  watch: {
    lunbotu: {
      immediate: true,
      handler() {
        this.$nextTick(() => {
          new Swiper(this.$refs.floor1Swiper, {
            //direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项
            // autoplay: true,

            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination",
              clickable: true, //设置小原店面可以切换
            },

            // 如果需要前进后退按钮
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },

            // 如果需要滚动条
            scrollbar: {
              el: ".swiper-scrollbar",
            },
          });
        });
      },
    },
  },
};
</script>

<style lang="less" scoped>
.lunBo {
  width: 100%;
  height: 100%;
  background: white;
}
.swiper {
  width: 100%;
  height: 100%;
  // background: red;
  position: relative;
  margin: auto;
}
.lunbo_ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  > li {
    width: 20%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    > img {
      width: 40px;
      height: 40px;
    }
  }
}
.swiper-pagination4 {
  bottom: -3px !important;
}
</style>